<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.4.js"></script>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<script>

    $(function(){
        for(var i=1;i<=30;i++){
            $("body").append("<div class='box'><img src='images/thumb/"+i+".jpg'/></div>");
        }

        $(".box img").load(function(){


        });

    });
    $(window).load(function(){
        var photo=$("img");
        for(var i=0;i<photo.length;i++){
            var temp=photo.eq(i);
            if(temp.height()<temp.width()){
                temp.css("margin-top","30px");
                $(".box").eq(i).addClass("boxls");
            }else{
                temp.css("margin-top","8px");
                $(".box").eq(i).addClass("boxpt");
            }
        }
    });

    $(function(){
        $(".box").click(function(){
            var index=$(".box").index(this)+1;
            var content=$("#show");
            content.css("display","block");
            content.empty();
            content.append("<div id='bg'>" +
                    "<div><img id='close' onclick='closeShow()' src='images/close.jpg'/></div>" +
                            "<div id='bg_bottom'><span id='pre' onclick='preImg()'><<<上一张</span>" +
                            "<span id='next' onclick='nextImg()'>下一张>>></span></div>"+
                    "</div>");
            var temp=$(".box img").eq(index-1);
            if(temp.height()>temp.width()){
                content.append("<div class='showIm showIm1'><img src='images/"+(index)+".jpg'/><div>");
            }else{
                content.append("<div class='showIm showIm2'><img src='images/"+(index)+".jpg'/><div>")
            }
            curImg=index;
        });
    });

    $("#close").click(function(){
        alert("sdfas");
    });

    function closeShow(){
        $("#show").css("display","none");
    }
    var curImg=0;
    $("#pre").click(function(){
        curImg--;
        $showIm=$(".showIm");
        $showIm.empty();
        if($showIm.hasClass("showIm1")){
            $showIm.removeClass("showIm1");
        }else{
            $showIm.removeClass("showIm2");
        }
        var temp=$(".box img").eq(curImg-1);
        if(temp.height()>temp.width()){
            $showIm.append("<img src='images/"+(curImg)+".jpg'/><div>");
            $showIm.addClass("showIm1");
        }else{
            $showIm.append("<img src='images/"+(curImg)+".jpg'/><div>");
            $showIm.addClass("showIm2");
        }
    });

    function preImg(){
        if(curImg==1){
            return;
        }
        curImg--;
        $showIm=$(".showIm");
        $showIm.empty();
        if($showIm.hasClass("showIm1")){
            $showIm.removeClass("showIm1");
        }else{
            $showIm.removeClass("showIm2");
        }
        var temp=$(".box img").eq(curImg-1);
        if(temp.height()>temp.width()){
            $showIm.append("<img src='images/"+(curImg)+".jpg'/><div>");
            $showIm.addClass("showIm1");
        }else{
            $showIm.append("<img src='images/"+(curImg)+".jpg'/><div>");
            $showIm.addClass("showIm2");
        }
    }

    function nextImg(){
        if(curImg==30){
            return;
        }
        curImg++;
        $showIm=$(".showIm");
        $showIm.empty();
        if($showIm.hasClass("showIm1")){
            $showIm.removeClass("showIm1");
        }else{
            $showIm.removeClass("showIm2");
        }
        var temp=$(".box img").eq(curImg-1);
        if(temp.height()>temp.width()){
            $showIm.append("<img src='images/"+(curImg)+".jpg'/><div>");
            $showIm.addClass("showIm1");
        }else{
            $showIm.append("<img src='images/"+(curImg)+".jpg'/><div>");
            $showIm.addClass("showIm2");
        }
    }
</script>
<div id="show"></div>
</body>
</html>